<template>
    <el-dialog :visible.sync="dialogVisible" width="620px" :close-on-click-modal="false">
        <span slot="title" style='color: rgba(0,0,0,.85);font-weight: 500;font-size: 14px;'>选择模板</span>
        <div class="printSelectArea">
            <p>Excel模板打印</p>
            <el-radio-group v-model="radio">
                <el-radio v-for="(i,index) in tableData" :key='i.id' :label="i.id">
                    {{i.templateName}}
                    <span v-show='!i.templateType' class="sysMould">系统模版</span>
                </el-radio>
            </el-radio-group>
            <div style="margin-top:10px;text-align:center">
                <el-button type='primary' size="small" style='padding:7px 35px' @click="downLoadFile">下载打印</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import {
        printTemplate,
        downloadTemplate
    } from '@/api/produceController'
    import {
        exportDataByModel
    } from '@/api/assemblyWorkOrderController'
    import fileDownload from "js-file-download";
    export default {
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                loading: false,
                radio: 0
            }
        },
        props: {
            belongModule: {
                type: Number,
                default: 0
            },
            assemblyIds: {
                type: String,
                default: ''
            }
        },
        methods: {
            initMould() {
                this.dialogVisible = true
                this.getPrintTemplate({
                    belongModule: this.belongModule
                }).then(() => {
                    const activeIndex = 0
                    this.radio = this.tableData[activeIndex].id
                })
            },
            //下载模板
            downloadTemplateFn: async function (data) {
                const res = await downloadTemplate(data)
                let targetName = name.split('.')[0]
                this.utils.showMsg('开始下载', 'success')
                fileDownload(res, targetName + new Date().dateFormat('yyyyMMddhhmmss'),
                    'application/vnd.ms-excel;charset=UTF-8')
            },
            //打印模板列表
            getPrintTemplate: async function (data) {
                this.loading = true
                const res = await printTemplate(data)
                this.tableData = res.data.records
                this.loading = false
            },
            downLoadFile() {
                exportDataByModel({
                    assemblyIds: this.assemblyIds,
                    id: this.radio
                }).then(res => {
                    let templateName = this.tableData.find(e => e.id == this.radio).templateName;
                    fileDownload(res, templateName + new Date().dateFormat('yyyyMMddhhmmss'),
                    'application/vnd.ms-excel;charset=UTF-8')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    ::v-deep .el-dialog__body {
        padding: 10px 30px 32px 30px;

        .printSelectArea {
            padding: 20px;
            background-color: hsla(0, 0%, 91%, .2);
            border: 1px solid #e8e8e8;

            p {
                color: rgba(0, 0, 0, .85);
                font-weight: 500;
                margin-bottom: 10px;
            }

            .el-radio-group {
                display: flex;
                flex-direction: column;

                .el-radio {
                    margin: 8px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, .85);

                    .sysMould {
                        margin-left: 4px;
                        color: rgb(153, 153, 153);
                        border: 1px solid rgb(204, 204, 204);
                        border-radius: 2px;
                        padding: 1px 3px;
                        display: inline-block;
                    }
                }
            }
        }
    }

    ::v-deep .el-dialog__footer {
        text-align: center;
    }
</style>